<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>克隆优化节点操作</title>
</head>

<body>
    <!-- 克隆已知或者已创建节点，进行复刻其属性和节点 -->
    <p id="aaa"></p>

    <script>
        for (let i = 0; i < 3; i++) {
            let el_p = document.createElement('p')
            el_p.innerHTML = i
            document.body.appendChild(el_p)
        }

        // dom.cloneNode(deep):克隆已知节点
        // deep：true=>深克隆，克隆节点及子节点，false=>浅克隆，克隆本节点
        let old_p = document.getElementById('aaa')
        for (let j = 0; j < 3; j++) {
            let el_p2 = old_p.cloneNode(false)
            el_p2.innerHTML = j
            document.body.appendChild(el_p2)
        }

        // jsbench.me：方法二执行效率高于一，不再创建节点，直接克隆渲染
    </script>
</body>

</html>